<!--
 * @Author: 赵泽通
 * @Date: 2024-06-27 11:28:08
 * @LastEditTime: 2024-06-27 15:31:35
 * @LastEditors: 赵泽通
 * @Description: 
 * @FilePath: \公租房位置项目\public_house\src\components\index.vue
 * @ascription 3xData
-->
<template>
  <div class="header">
    <h1>2024石家庄公租房位置</h1>
  </div>
  <div class="container" id="map"></div>
</template>


<script setup>
import { onMounted, ref } from "vue"
let markers = [
  { id: 1, position: [114.394409, 38.075825], title: '依水佳苑',type:'A' },
  { id: 2, position: [114.486108, 37.985036], title: '东安小区' ,type:'A' },
  { id: 3, position: [114.543843, 38.064289], title: '建华家园' ,type:'A' },
  { id: 4, position: [114.56656, 38.066337], title: '谈安小区' ,type:'A,B' },
  { id: 5, position: [114.575414, 38.073939], title: '盛和苑' ,type:'A,B' },
  { id: 6, position: [114.471281, 37.975299], title: '红河小区' ,type:'A,B' },
  { id: 7, position: [114.561571, 38.070423], title: '民华家园' ,type:'A' },
  { id: 8, position: [114.53269, 38.069587], title: '仁华家园' ,type:'A' },
  { id: 9, position: [114.395984, 38.074733], title: '秀河家园' ,type:'A,B' },

  { id: 10, position: [114.517461, 37.972483], title: '文河小区' ,type:'A' },
  { id: 11, position: [114.403955, 38.073746], title: '秀玉家园' ,type:'A' },
  { id: 12, position: [114.570564, 37.994887], title: '安和苑' ,type:'A,B,C' },
  { id: 13, position: [114.470109, 38.108351], title: '乾园生活小区' ,type:'A' },
  { id: 14, position: [114.490318, 37.978298], title: '南和苑小区' ,type:'A' },
  { id: 15, position: [114.54127, 38.074739], title: '福华家园' ,type:'A' },
  { id: 16, position: [114.573634, 37.980912], title: '金碧雅苑（恒大雅苑）' ,type:'A' },
  { id: 17, position: [114.548311, 38.056173], title: '和华家园' ,type:'A' },

  { id: 18, position: [114.50246, 38.002602], title: '盛邦花园一区' ,type:'A' },
  { id: 19, position: [114.564903, 37.991798], title: '安苑小区' ,type:'A,B' },
  { id: 20, position: [114.486804, 38.086162], title: '安华家园' ,type:'A' },
  { id: 21, position: [114.549657, 38.067428], title: '奥北公元' ,type:'A,B' },
  { id: 22, position: [114.439428, 38.056173], title: '天河悦城' ,type:'A,C' },
  { id: 23, position: [114.574296, 38.000058], title: '众美绿都' ,type:'A' },
  { id: 24, position: [114.472011, 38.025833], title: '珍集嘉苑' ,type:'A,B' },
  { id: 25, position: [114.562727, 38.088091], title: '恒大御景半岛',type:'A,B' },
  { id: 26, position: [114.581055, 38.080306], title: '博雅盛世' ,type:'A,B' },
  { id: 27, position: [114.540541, 38.096022], title: '翰唐城' ,type:'A,B,C' },
  { id: 28, position: [114.439478, 38.101022], title: '汇君城' ,type:'A' },

  { id: 29, position: [114.565346, 38.035717], title: '国际丽都' ,type:'A,B' },
  { id: 30, position: [114.564021, 38.079883], title: '富瀛苏园' ,type:'A,B' },
  { id: 31, position: [114.557333, 38.050801], title: '卓达·明郡' ,type:'A' },
  { id: 32, position: [114.488863, 37.990111], title: '全美佳苑' ,type:'A,C' },
  { id: 33, position: [114.536707, 38.004773], title: '保利·拉菲公馆朗菲园' ,type:'B,C' },
  { id: 34, position: [114.544039, 38.013073], title: '天海·誉天下' ,type:'A' },
  { id: 35, position: [114.553069, 38.060284], title: '悦城' ,type:'A,B' },
  { id: 36, position: [114.571977, 38.052482], title: '瑞城北区（瑞府）' ,type:'A,B' },
  { id: 37, position: [114.521473, 38.008894], title: '维多利亚时代逸景园' ,type:'A,B' },

  { id: 38, position: [114.522352, 38.060498], title: '光华里' ,type:'A' },
  { id: 39, position: [114.459562, 38.082321], title: '弘石湾B1区' ,type:'A' },
  { id: 40, position: [114.457903, 38.000513], title: '荣熙苑（阿尔卡迪亚·荣盛城）' ,type:'A,B' },
  { id: 41, position: [114.516033, 38.007244], title: '香颂茗苑（玫瑰湾）' ,type:'A,C' },
  { id: 42, position: [114.519672, 38.06078], title: '云棠家园' ,type:'AB,C' },
  { id: 43, position: [114.5759, 38.01424], title: '全城绿洲' ,type:'A' },
  { id: 44, position: [114.557139, 38.044334], title: '尚达家园' ,type:'A' },
  { id: 45, position: [114.553658, 38.005302], title: '恒大名都' ,type:'A' },
  { id: 46, position: [114.450546, 38.080468], title: '健达花园' ,type:'A,B' },

  { id: 47, position: [114.442834, 38.075119], title: '雍和·慢城南区' ,type:'A' },
  { id: 48, position: [114.485092, 38.08705], title: '明珠花苑' ,type:'A' },
  { id: 49, position: [114.594934, 38.053378], title: '保利·茉莉公馆沁香园' ,type:'B,C' },
  { id: 50, position: [114.521411, 38.107743], title: '半岛名邸' ,type:'A,B' },
  { id: 51, position: [114.50034, 37.984555], title: '青年时光城' ,type:'A' },
  { id: 52, position: [114.548921, 37.97909], title: '融创·臻瑞园' ,type:'A,B' },
  { id: 53, position: [114.480174, 38.066543], title: '尚杰御庭' ,type:'A,C' },
  { id: 54, position: [114.566402, 38.068624], title: '悦城北区15号地块' ,type:'B,C' },
  { id: 55, position: [114.441543, 38.074441], title: '祥云岸芷汀兰' ,type:'A' },
  { id: 56, position: [114.505766, 38.000006], title: '腾华雅居' ,type:'A' },
  { id: 57, position: [114.41015, 38.032958], title: '东胜紫御府' ,type:'A' },

  { id: 58, position: [114.449208, 38.020166], title: '海棠家园' ,type:'A' },
  { id: 59, position: [114.564512, 38.070189], title: '翰玉门庭' ,type:'C' },
  { id: 60, position: [114.491115, 37.996611], title: '泰丰观湖' ,type:'C' },
]
onMounted(() => {
  //地图实例
  let map = new AMap.Map(
    'map',//地图容器id
    {
      resizeEnable: true, //是否监控地图容器尺寸变化
      zoom: 12, //初始化地图层级
      center: [114.498448, 38.039153], //初始化地图中心点
      //  mapStyle:'amap://styles/blue',//地图样式（背景）可选，可以在后台新建自定义样式
    });
  AMap.plugin('AMap.ToolBar', function () {
    var toolbar = new AMap.ToolBar(); //缩放工具条实例化
    map.addControl(toolbar);
  });
  let markerList = []
  markers.forEach(item => {
    let marker = new AMap.Marker({
      position: new AMap.LngLat(item.position[0], item.position[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      title: item.title,
      type:item.type
    });
    marker.setLabel({
      offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
      content: `<div >${marker.De.title}</div><br/><div>户型：${marker.De.type}</div>`, //设置文本标注内容
      direction: 'bottom' //设置文本标注方位
    });
    markerList.push(marker)
    console.log('??', marker);

  })
  map.add(markerList)

})
</script>

<style lang="scss" scoped>
.header {
  height: 100px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  h1 {
    font-size: 24px;
    font-weight: bold;
  }
}
.container {
  height: calc(100vh - 100px);
  width: 100%;
  // border: 1px solid red;
}
</style>